<template>
  <div class="down" style="min-width: 600px">
    <div class="title">
      <div>下载中心</div>
      <div class="cha" @click="goBack">×</div>
    </div>
    <el-card>
      <div class="hint">
        <i class="el-icon-reading"></i>
        <span>下载后的文件只保留7天，过期文件请重新下载。</span>
      </div>
      <el-table :data="dataList">
        <template slot="empty">
          <el-empty
            :image="require('@/assets/imgs/middleWork/k1.png')"
            :image-size="80"
            description="暂无相关数据"
          ></el-empty>
        </template>
        <el-table-column
          show-overflow-tooltip
          prop="gmtCreated"
          align="center"
          label="时间"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.gmtCreated ? scope.row.gmtCreated : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="fileName"
          align="center"
          label="文件名称"
        >
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.fileName ? scope.row.fileName : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="statusName"
          align="center"
          label="状态"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="act"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              @click="downFn(scope.row)"
              v-throttle="1000"
              type="text"
              v-if="scope.row.statusName == '处理成功'"
              >下载到本地</el-button
            >
            <el-button
              @click="deleteHandle(scope.row.id, '确定删除这条下载记录')"
              type="text"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      layout="prev, pager, next, sizes, jumper"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      :current-page="1"
      :total="total"
      @current-change="pageCurrentChangeHandle"
      @size-change="pageSizeChangeHandle"
    >
    </el-pagination>
  </div>
</template>

<script>
import mixin from "@/mixins/mixin";
import { getToken } from "@/utils/public";
import crypto from "@/crypto";
import { randomWord } from "@/utils/getRandom";

export default {
  mixins: [mixin],
  name: "middleWorkDown",
  data() {
    return {
      curTmp: null,
      curTck: null,
      len: [8, 9, 10, 11, 12][
        Math.floor(Math.random() * [8, 9, 10, 11, 12].length)
      ],
      downId: "",
      dataList: [],
      dataForm: {},
      mixinViewModuleOptions: {
        getDataListURL: "/api/bill/downloadCenter/searchByPage",
        deleteURL: "/api/bill/downloadCenter/delete",
      },
    };
  },
  created(){
    this.curTmp = new Date().getTime();
    this.curTck = crypto.set(
      getToken() + "_" + this.curTmp + "_" + randomWord(this.len),
      "a1g0qoalvv19aed3"
    );
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    windowOpen(url, fileName) {
      var this_ = this;
      var xhr = new XMLHttpRequest();
      // var fileName = window.fileName + typeName; // 文件名称
      xhr.open("GET", url, true);
      xhr.responseType = "blob";
      xhr.setRequestHeader("Accept", "application/json, text/plain, */*");
      xhr.setRequestHeader("auth_token", getToken());
      xhr.setRequestHeader("auth_tmp", this.curTmp);
      xhr.setRequestHeader("auth_tck", this.curTck);
      xhr.setRequestHeader(
        "app_id",
        this.$store.state.appId ? this.$store.state.appId : ""
      );
      xhr.onload = function () {
        if (this.status === 201) {
          this_.$message.success("下载成功！");
          var type = xhr.getResponseHeader("Content-Type");
          var blob = new Blob([this.response], { type: type });
          if (typeof window.navigator.msSaveBlob !== "undefined") {
            /*
             * For IE
             * >=IE10
             */
            window.navigator.msSaveBlob(blob, fileName);
          } else {
            /*
             * For Non-IE (chrome, firefox)
             */
            var URL = window.URL || window.webkitURL;
            var objectUrl = URL.createObjectURL(blob);
            if (fileName) {
              var a = document.createElement("a");
              if (typeof a.download === "undefined") {
                window.location = objectUrl;
              } else {
                a.href = objectUrl;
                a.download = fileName;
                document.body.appendChild(a);
                a.click();
                a.remove();
              }
            } else {
              window.location = objectUrl;
            }
          }
        } else {
          this_.$http
            .get(`/api/bill/downloadCenter/download?id=${this_.downId}`)
            .then();
        }
      };
      xhr.send();
    },
    downFn(row) {
      this.downId = row.id;
      var URL =
        window.location.origin +
        `/merchantApi/api/bill/downloadCenter/download?id=${row.id}`;
      this.windowOpen(URL, row.fileName);
    },
  },
};
</script>

<style lang="scss" scoped>
.down {
  padding: 10px 30px;
  .title {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color: #869daa;
    align-items: center;
  }
  .cha {
    font-size: 24px;
    cursor: pointer;
  }
  .hint {
    width: 330px;
    height: 32px;
    line-height: 32px;
    background: #f0fcff;
    border-radius: 6px;
    border: 1px solid #25b5d9;
    color: #25b5d9;
    padding-left: 20px;
    margin-bottom: 20px;
    font-size: 12px;
    .el-icon-reading {
      margin-right: 20px;
      font-size: 16px;
      // vertical-align: middle;
    }
    span {
      // vertical-align: middle;
    }
  }
}
</style>
